<template>
  <div class="tabs-root">
    <div 
      class="tab" 
      v-for="tab in tabs" 
      :key="tab.value"
      :class="{selected: getIsSelected(tab)}"
      @touchend="onSelect(tab)"
      >
      {{tab.name}}
    </div>
  </div>
</template>
  
<script>
  export default {
    name: 'Tabs',

    props: {
      tabs: {
        type: Array,
        default () {
          return []
        }
      },
      selectedTabValue: null
    },

    data () {
      return {
      }
    },

    computed: {},

    mounted () {},

    methods: {
      /*
       * 判断是否选中
       */
      getIsSelected (tab) {
        return tab.value === this.selectedTabValue
      },

      onSelect (tab) {
        this.$emit('change', tab)
      }
    }
  }
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/default.styl'
.tabs-root
  width 100%
  height auto
  display flex
  justify-content space-around
  border-top 1px solid #ddd
  border-bottom 1px solid #ddd
  font-size fSizeM
  .tab
    width 2rem
    height 1rem
    line-height 1rem
    border-bottom 0
    text-align center
    &.selected
      border-bottom 0.08rem solid Red
</style>
